<template>
  <view class="pages">
    <view class="bgimgs">
      <image src="https://pw.qyang.cc/static/bglevel.png" mode="scaleToFill" />
    </view>
    <view class="tops">
      <view class="top">
        <view class="avator">
          <image style="border-radius: 50%;" :src="rq.imgUrl(info.avatar)" mode="scaleToFill" />
          <text>{{info.nickname}}</text>
          <view class="yellow" v-if="info.level"><image src="https://pw.qyang.cc/static/yelzuan.png" mode="scaleToFill" />
            <text>{{info.level.name}}</text>
          </view>
        </view>
        <view class="jingyan" @click="goDetail()">
          <view class="yq">
            <image src="https://pw.qyang.cc/static/huangguan.png" mode="scaleToFill" />
            <p>我的经验值 ></p>
          </view>
          <text>{{info.exp?info.exp:'0'}}</text>
        </view>
      </view>
      <view class="fenzuan">
        <image src="https://pw.qyang.cc/static/fenzuan.png" mode="scaleToFill" />
      </view>
    </view>
    <view class="infos">
      <view class="info">
        <view style="font-size: 34rpx; font-weight: normal">
			升级达人等级
		</view>
        <view class="line">
          <p>已获得{{info.exp?info.exp:'0'}}经验值</p>
		   <!-- :style="{width:(info.exp/(info.exp+info.nextlevel.exp)*100+'%')}" -->
        </view>
        <p>{{info.nextlevel.exp===0?'您已满级':`距离${info.nextlevel.name}等级还需要${info.nextlevel.exp}经验值`}}</p>
      </view>
    </view>
    <view class="vips y_center">
		<view style="font-size: 34rpx; font-weight: normal; margin: 30rpx 0;">达人等级权益</view>
      <view class="vip">
        <view class="texts">
			<rich-text :nodes="content"></rich-text>
		</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
		info:{},
		content:''
	};
  },
  onLoad(){
	  this.rq.getData('spread/experienceIndex').then(res=>{
		  this.info = res.data
	  })
	  this.rq.getData('common/agreement',{type:'grade_equity'}).then(res=>{
		  this.content = res.data.data
	  })
  },
  methods: {
    goDetail() {
      uni.navigateTo({
        url: "/subpages/translation/details/details",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.pages {
  width: 100%;
  min-height: 100vh;
  background: url(https://pw.qyang.cc/static/bglevels.png);
  position: relative;
  .bgimgs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .tops {
    display: flex;
    justify-content: space-between;
    position: relative;
    .top {
      padding: 30rpx;
      .avator {
        display: flex;
        align-items: center;
        image {
          width: 100rpx;
          height: 100rpx;
        }
        text {
          margin: 0 20rpx;
          color: #63311f;
          font-size: 30rpx;
          font-weight: bold;
        }
        .yellow {
          display: flex;
          align-items: center;
		  position: relative;
          image {
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            left: 0;
            z-index: 10;
          }
          text {
            position: relative;
            background: #ffe2dc;
            border-radius: 25rpx;
            padding: 3rpx 35rpx;
            color: #ff7681;
            font-weight: normal;
          }
        }
      }
      .jingyan {
        .yq {
          margin: 25rpx 0;
          display: flex;
          align-items: center;
          image {
            width: 50rpx;
            height: 50rpx;
          }
          p {
            margin: 0 10rpx;
            color: #63311f;
          }
        }
        text {
          font-size: 46rpx;
          font-weight: bold;
          color: #63311f;
        }
      }
    }
    .fenzuan {
      position: absolute;
      top: 80rpx;
      right: -40rpx;
      image {
        width: 380rpx;
        height: 400rpx;
      }
    }
  }
  .infos {
    width: 700rpx;
    height: 240rpx;
    border-radius: 8px;
    // opacity: 0.56;
    background: #ffffff56;
    margin: 20rpx auto;
    .info {
      padding: 20rpx 30rpx;
      title {
        color: #63311f;
        font-size: 36rpx;
      }
      .line {
        width: 640rpx;
        height: 42rpx;
        line-height: 40rpx;
        background: #f1e2e8;
        border-radius: 25rpx;
        color: #ffffff;
        margin: 25rpx 0;
		overflow: hidden;
        p {
          font-size: 24rpx;
          width: 300rpx;
          height: 42rpx;
          line-height: 40rpx;
          background: linear-gradient(
            98deg,
            #f9a18d 5%,
            #f6999c 51%,
            #f56d80 95%
          );
          border-radius: 25rpx;
          text-align: center;
        }
      }
      p {
        font-size: 28rpx;
      }
    }
  }
  .vips {
    width: 700rpx;
    height: 600rpx;
    border-radius: 25rpx;
    // opacity: 0.56;
    background: #ffffff56;
    margin: 20rpx auto;
    .vip {
		background: #ffffff;
		width: 80%;
		// text-align: center;
		padding: 20rpx 30rpx;
		border-radius: 25rpx;
		.texts {
			width: 90%;
			height: 300rpx;
			opacity: 5;
			font-size: 26rpx;
			overflow-y: auto;
		}
    }
  }
}
</style>